<template>
  <div class="page-common-layout custom-tablePage-container">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            @conditionChange="selectGroupChange($event)"
          >
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <!-- <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button> -->
        </template>
      </ScreenConditions>
    </div>
    <div class="table-body-container">
      <div class="table-main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            field="proName"
            title="项目名称"
            min-width="200"
            align="left"
          >
          </vxe-column>
          <vxe-column field="creator" title="上传人"> </vxe-column>
          <vxe-column field="createTime" title="上传时间"> </vxe-column>
          <vxe-column field="operate" width="160" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="handleViewProcess(row)">
                  流程图
                </a-button>
                <a-button
                  type="link"
                  @click="handleConfigFlow(row)"
                  v-if="row.isEdit == 0"
                >
                  流程配置
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 预览流程 -->
    <viewModal
      :visible.sync="viewModal.visible"
      :parameter="viewModal.row"
    ></viewModal>
    <!-- 配置流程 -->
    <configFlowPage
      :visible.sync="configFlowPage.visible"
      :configSource="configFlowPage.row"
    ></configFlowPage>
  </div>
</template>

<script>
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import AssociativeSelectGroup from "@/components/extendCustom/AssociativeSelectGroup";
//流程图
import viewModal from "./components/viewModal.vue";
//编辑
import configFlowPage from "./components/configFlowPage.vue";
import { pageFlowPath } from "@/api/knowledgeBase";
export default {
  components: {
    ScreenConditions,
    AssociativeSelectGroup,
    viewModal,
    configFlowPage,
  },
  data() {
    return {
      selectMap: [
        //项目
        {
          type: "proCode",
          mode: "default",
          placeholder: "请选择项目",
          allowClear: true,
        },
      ],
      conditionsData: {},
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      //流程图
      viewModal: {
        visible: false,
        row: {},
      },
      //配置流程
      configFlowPage: {
        visible: false,
        row: {},
      },
    };
  },
  methods: {
    //查看流程图
    handleViewProcess(row) {
      this.viewModal.row = row;
      this.viewModal.visible = true;
    },

    //编辑流程
    handleConfigFlow(row) {
      this.configFlowPage.row = row;
      this.configFlowPage.visible = true;
    },

    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.pager.page = 1;
      this.getTableData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { proCode = "" } = this.conditionsData;
      pageFlowPath({
        page,
        pageSize,
        proCode,
      })
        .then((res) => {
          this.tableData = res?.rows || [];
          this.pager.total = res?.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped></style>
